<script setup>
import {computed, nextTick, onMounted, ref} from "vue";
import {useStore} from "@/stores";
import {postJson} from "@/net";

const store = useStore()
const props = defineProps({
  data: {default: null},
  user: {default: null},
  onClose: {
    type: Function, default: () => {
    }
  },
});
const data = props.data
const user = props.user
// 创建组件ref
const contextMenu = ref(null);
onMounted(async () => {
// 确保组件已经渲染
  await nextTick();
// 触发组件focus
  contextMenu.value.focus();
});

const recallMessage = () => {
  let number = store.messageList.find(item => item.id == data.id);
  console.log(number)
  let one = store.userList.userList.find(one => one.id == user.id)
  one.newMessage = '你撤回一条消息'
  one.newMessageName = ''
  number.message = '你撤回一条消息'
  number.type = 3
  postJson('/cat/message/withdrawOne', {
    userId: store.auth.user.id,
    messageId: data.id,
    toUserId:number.toUserId
  }, (data) => {

  }, (data) => {

  })
}

const clickFunc = (type) => {
  switch (type) {
    case "5" :
      recallMessage()
      break;
  }
  props.onClose();
};
const actions = [
  {
    label: "复制",
    type: "1",
  },
  {
    label: "转发",
    type: "2",
  },
  {
    label: "收藏",
    type: "3",
  },
  {
    label: "多选",
    type: "4",
  },
  {
    label: "撤回",
    type: "5",
  },
];

</script>
<template>
  <div
      class="context-menu"
      ref="contextMenu"
      @blur="onClose"
      tabindex="-1"
  >
    <div v-for="(item, idx) in actions" :key="idx">
      <div class="context-menu__item" @click="clickFunc(item.type)">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.context-menu {
  position: fixed;
  padding: 12px 4px;
  border-radius: 6px;
  border: 1px solid rgba(222, 222, 222, 0.5);
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  user-select: none;

  &:focus {
    outline: none;
  }


  &__item {
    padding: 8px 12px;
    cursor: pointer;

    &:hover {
      color: #646cff;
      background-color: rgba(100, 108, 255, 0.1);
      border-radius: 6px;
    }
  }

  &__info {
    display: flex;
    padding: 0 12px;
  }

  &__img {
    width: 36px;
    height: 36px;
    margin-right: 6px;
  }

  &__name {
    font-size: 16px;
  }

  &__subname {
    color: #666;
    font-size: 12px;
  }
}
</style>